<template><el-container>
  <el-header>购物车</el-header>
  <el-main>    
  <el-table :data="cartProducts"  height="250" border  style="width: 100%">
    <el-table-column   prop="id"   label="id"   width="180">
    </el-table-column>
    <el-table-column   prop="name"   label="名称"  width="180">
    </el-table-column>
    <el-table-column  prop="price"  label="价格">
    </el-table-column>
     <el-table-column  prop="num"  label="数量">
    </el-table-column>
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button  size="mini" type="red"
          @click="delProduct(scope.row)">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
   </el-table></el-main>
</el-container>
</template>

<script>
import {mapGetters,mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed:{
      ...mapGetters(['cartProducts'])
  },
  methods: {
   ...mapActions(['delProduct'])
  }
};
</script>